/******************************************************************
Site Name:
Author:

Stylesheet: Form Styles

We put all the form and button styles in here to setup a consistent
look. If we need to customize them, we can do this in the main
stylesheets and just override them. Easy Peasy.

You're gonna see a few data-uri thingies down there. If you're not
sure what they are, check this link out:
http://css-tricks.com/data-uris/
If you want to create your own, use this helpful link:
http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/

******************************************************************/

/*********************
INPUTS
*********************/

// setting up defaults
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
select,
textarea,
.field {
  display: block;
  height: 40px;
  line-height: 1em;
  padding: 0 12px;
  font-size: 1em;
  box-sizing: border-box;
  color: $text-color;
  vertical-align: middle;
  box-shadow: none;
  border: 1px solid $border-color;
  width: 100%;
  font-family: $lato;
  background-color: $gray;
  @include transition(background-color 0.24s ease-in-out);

  // a focused input (or hovered on)
  &:focus,
  &:active {
    background-color: lighten($gray, 4%);
    outline: none; 
  } // end hover or focus

  // error notification
  &.error,
  &.is-invalid {
    color: $alert-red;
    border-color: $alert-red;
    background-color: $white;
    background-position: 99% center;
    background-repeat: no-repeat;
    background-image: url();
    outline-color: $alert-red;
  } // end invalid input

  // success notification
  &.success,
  &.is-valid {
    color: $alert-green;
    border-color: $alert-green;
    background-color: $white;
    background-position: 99% center;
    background-repeat: no-repeat;
    background-image: url();
    outline-color: $alert-green;
  } // end valid input

  // a disabled input
  &[disabled],
  &.is-disabled {
    cursor: not-allowed;
    border-color: $disabled-gray;
    opacity: 0.6;

    &:focus,
    &:active {
      background-color: $alert-blue;
    } // end disabled focus

  } // end disabled input

} // end input defaults

// spacing out the password (thx @murtaugh)
input[type="password"] {
  letter-spacing: 0.3em;
}

// textareas
textarea {
  max-width: 100%;
  min-height: 120px;
  line-height: 1.5em;
}

// selects
select {
  -webkit-appearance: none; /* 1 */
  -moz-appearance: none;
  appearance: none;
  // Base64 encoded little arrow
  background-image: url();
  background-repeat: no-repeat;
  background-position: 97.5% center;
}


